<!--
  *  表格列设置
  *
  * @Author:    zhoujk
  * @Date:      2022-08-26 23:45:51
  *
-->

<template>
  <span>
    <a-tooltip title="全屏" v-if="!fullScreenFlag">
      <a-button type="text" @click="onFullScreen" size="small">
        <template #icon><fullscreen-outlined /></template>
      </a-button>
    </a-tooltip>
    <a-tooltip title="取消全屏" v-if="fullScreenFlag">
      <a-button type="text" @click="onFullScreen" size="small">
        <template #icon><fullscreen-exit-outlined /></template>
      </a-button>
    </a-tooltip>
    <a-tooltip title="刷新">
      <a-button type="text" @click="props.refresh" size="small">
        <template #icon><redo-outlined /></template>
      </a-button>
    </a-tooltip>
    <a-tooltip title="列设置">
      <a-button type="text" @click="showModal" size="small">
        <template #icon><setting-outlined /></template>
      </a-button>
    </a-tooltip>
    <SmartTableColumnModal ref="smartTableColumnModal" @change="updateColumn" />
  </span>
</template>

<script setup>
  import _ from 'lodash'
  import { tableColumnApi } from '/@/api/support/table-column-api'
  import { ref, watch } from 'vue'
  import SmartTableColumnModal from './smart-table-column-modal.vue'
  import { message } from 'ant-design-vue'
  import { mergeColumn } from './smart-table-column-merge'
  import { smartSentry } from '/@/lib/smart-sentry'
  import { useAppConfigStore } from '/@/store/modules/system/app-config.js'

  const props = defineProps({
    // 表格列数组
    modelValue: {
      type: Array,
      default: [],
    },
    // 刷新表格函数
    refresh: {
      type: Function,
      required: true,
    },
    // 表格id
    tableId: {
      type: Number,
      require: true,
    },
  })

  const emit = defineEmits(['update:modelValue'])

  // 原始表格列数据（复制一份最原始的columns集合，以供后续各个地方使用）
  let originalColumn = _.cloneDeep(props.modelValue)

  // onMounted(buildUserTableColumns);

  //构建用户的数据列
  async function buildUserTableColumns() {
    if (!props.tableId) {
      return
    }

    let userTableColumnArray = []
    try {
      let res = await tableColumnApi.findOne({ tableId: props.tableId })
      if (res.data) {
        try {
          userTableColumnArray = JSON.parse(res.data)
        } catch (e1) {
          smartSentry.captureError(e1)
        }
      }
    } catch (e) {
      smartSentry.captureError(e)
    }
    updateColumn(userTableColumnArray)
  }

  // ----------------- 全屏 -------------------
  const fullScreenFlag = ref(false)

  function onFullScreen() {
    if (fullScreenFlag.value) {
      // 退出全屏
      handleExitFullScreen()
      exitElementFullscreen(document.body)
    } else {
      fullScreenFlag.value = true
      useAppConfigStore().startFullScreen()
      launchElementFullScreen(document.body)
    }
  }

  // 处理退出全屏
  function handleExitFullScreen() {
    fullScreenFlag.value = false
    useAppConfigStore().exitFullScreen()
    document.removeEventListener('fullscreenchange', handleFullscreenChange)
    document.removeEventListener('mozfullscreenchange', handleFullscreenChange) // Firefox
    document.removeEventListener('webkitfullscreenchange', handleFullscreenChange) // Chrome, Safari and Opera
    document.removeEventListener('MSFullscreenChange', handleFullscreenChange) // Internet Explorer and Edge
  }

  //判断各种浏览器 -全屏
  function launchElementFullScreen(element) {
    if (element.requestFullscreen) {
      element.requestFullscreen()
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen()
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen()
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen()
    } else {
      message.error('当前浏览器不支持部分全屏！')
    }
    document.addEventListener('fullscreenchange', handleFullscreenChange)
    document.addEventListener('mozfullscreenchange', handleFullscreenChange) // Firefox
    document.addEventListener('webkitfullscreenchange', handleFullscreenChange) // Chrome, Safari and Opera
    document.addEventListener('MSFullscreenChange', handleFullscreenChange) // Internet Explorer and Edge
  }

  function handleFullscreenChange() {
    if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
    } else {
      handleExitFullScreen()
    }
  }

  //判断各种浏览器 -退出全屏
  function exitElementFullscreen(element) {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
  }

  // ----------------- 弹窗 修改表格列 -------------------

  const smartTableColumnModal = ref()

  function showModal() {
    smartTableColumnModal.value.show(originalColumn, props.tableId)
  }

  // 将弹窗修改的列数据，赋值给原表格 列数组
  function updateColumn(changeColumnArray) {
    //合并列
    const newColumns = mergeColumn(_.cloneDeep(originalColumn), changeColumnArray)
    emit(
      'update:modelValue',
      newColumns.filter((e) => e.showFlag),
    )
  }

  // ========= 定义 watch 监听 ===============
  watch(
    () => props.tableId,
    (e) => {
      if (e) {
        originalColumn = _.cloneDeep(props.modelValue)
        buildUserTableColumns()
      }
    },
    { immediate: true },
  )
</script>
